<template>
    <div class="payAdd">
        <div class="payAddHead">
            <div class="payLeft"><button>新增计费项目</button></div>
            <div class="payRight"></div>
        </div>
        <div role="tabpanel" id="pane-0" aria-labelledby="tab-0" class="el-tab-pane" style="background: white;">
            <form class="el-form demo-ruleForm">
                <div class="el-form-item el-form-item--small"><label class="el-form-item__label"
                        style="width: 120px;">计费项目名称：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">{{ data.username }}
                    </div>
                </div>
                <div class="el-form-item el-form-item--small" style="width: 100%;"><label class="el-form-item__label"
                        style="width: 120px;">项目优先级：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <div>{{ data.paylevel }}</div>
                    </div>
                </div>
                <div class="el-form-item el-form-item--small" style="width: 100%;"><label class="el-form-item__label"
                        style="width: 120px;">项目用量/时长：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <div>{{ data.paynum }}</div>
                    </div>
                </div>
                <div class="el-form-item el-form-item--small" style="width: 100%;"><label class="el-form-item__label"
                        style="width: 120px;">项目价格：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <div>{{ data.paymoney }}</div>
                    </div>
                </div>
                <div class="el-form-item el-form-item--small" style="width: 100%;"><label class="el-form-item__label"
                        style="width: 120px;">通知状态：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <div>{{ data.coststatus == 1 ? '已通知' : '未通知' }}</div>
                    </div>
                </div>
                <div class="el-form-item el-form-item--small" style="width: 100%;"><label class="el-form-item__label"
                        style="width: 120px;">通知人：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <div>{{ data.username }}</div>
                    </div>
                </div>
                <div class="el-form-item el-form-item--small" style="width: 100%;"><label class="el-form-item__label"
                        style="width: 120px;">通知内容：</label>
                    <div class="el-form-item__content" style="margin-left: 120px;">
                        <div>{{ data.costcontent }}</div>
                    </div>
                </div>
            </form>
        </div>
        <div class="payAddFooter">
            <el-button type="primary" size="middle" @click="handleBack">返回</el-button>
        </div>
    </div>
</template>
<script>
import TinymceEditor from '@/components/Editor/index.vue'
export default {
    components: {
        TinymceEditor
    },
    created() {
        console.log(this.$route.query.value);
        this.data = JSON.parse(this.$route.query.value)
    },
    data() {
        return {
            data: {}
        }
    },
    methods: {
        handleBack() {
            this.$router.go(-1)
        },
    }
}
</script>
<style lang="scss" scoped>
.payAdd {
    margin: 0.4% 0.2%;
    border: 1px solid #dcdfe6;

    .payAddHead {
        display: flex;

        .payLeft {
            button {
                width: 130px;
                border: 1px solid #dcdfe6;
                border-bottom: #fff;
                padding: 10px 20px;
                color: #409eff;
                background-color: #fff;

            }
        }

        .payRight {
            width: 100%;
            background-color: rgba(0, 0, 2, .03);
            border: 1px solid #dcdfe6;
            border-left: none;
        }
    }

    .payAddFooter {
        width: 100px;
        position: absolute;
        right: 0;
        top: 300px;

        .el-button {
            padding: 10px 25px;
            margin: 10px 0;
        }
    }
}
</style>